<template>
    <div :class="personInfoClass">
        <a-row>
            <a-col :span="windowFlag == true ? 15 : 24" class="articleInfo-left">
                <div class="article">
                    <h1><b>{{article.articleTitle}}</b></h1>
                    <h4><u>作者：{{user.nickName}}</u></h4>
                    <h4>
                        <span>阅读量：{{article.articleGlance}}</span>
                        <span><i>创建时间：{{article.createTime}}</i></span>
                        <span v-if="article.updateTime"><i>更新时间：{{article.updateTime}}</i></span>
                    </h4>
                    <hr>
                    <div class="content">
                        <p v-html="article.articleContent"></p>
                    </div>
                </div>
            </a-col>
            <a-col :span="windowFlag == true ? 9 : 24" class="articleInfo-right">
                <Sidebar></Sidebar>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import Sidebar from "../Sidebar";
export default {
    props: ["windowFlag","id"],
    components: {
        Sidebar,
    },
    data() {
        return {
            article:{
            },
            user:{
                id: 1,
                nickName: "admin"
            }
        };
    },
    computed: {
        personInfoClass() {
            if (this.windowFlag) {
                return "articleInfo";
            } else {
                return "articleInfo-small";
            }
        },
    },
    mounted(){
        this.getOne();
    },
    methods: {
        /* 获取文章信息 */
        getOne(){
            let param = {"articleId":this.id};
            this.$api.article.getOne(param).then(res => {
                if(res.code==200){
                    this.article = res.data.article;
                }else{
                    this.$message.error("获取文章失败，请刷新");
                }
            })
        }
        
    },
    
};
</script>

<style lang="less" scoped>
@import "@/assets/small_css/articleInfo_small.less";
.articleInfo {
    width: 100%;
    height: auto;
    .articleInfo-left {
        height: auto;
        padding: 1.2%;
        .article{
            background: rgba(255, 255, 255, 0.9);
            width: 80%;
            height: auto;
            float: right;
            padding: 2%;
            h4{
                width: 100%;
                text-align: right;
                span{
                    margin-left: 3%;
                }
            }
            .content{
                text-align: left;
                font-size: 1.25rem;
                padding: 10px 0;
            }
        }
    }
    .articleInfo-right {
        height: auto; 
    }
}

</style>